<template>
	<div id="historymechanism">
		<at-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
			<at-tab-pane label="新增历史信息" name="add">
				<div class='contain_box'>
					<div class='table_title'>新增同步历史</div>
					<div class='title_box'>
						<at-search class='search_input' project='mh' :placeholder='searchTitle' type='text' v-model='value' icon='search' :on-icon-click='handleIconClick'></at-search>
					</div>
					<div class="tableBox">
				  <at-table :data="history_add.table" @sort-change="sortChange" @filter-change="filterHandler">
					<at-table-column prop="zr_time" label="更新时间" width='160' column-key="delete" sortable="custom">
					</at-table-column>
					<at-table-column prop="aagency_id" label="机构ID">
					</at-table-column>
					<at-table-column prop="aagency_name" label="机构名称">
					</at-table-column>
					<at-table-column prop="ctype_name" label="类型" column-key="type_name">
					</at-table-column>
					<at-table-column prop="bagency_name" label="上级机构">
					</at-table-column>
					<at-table-column prop="sup" label="监管机构">
					</at-table-column>
					<at-table-column prop="province" label="所在省份">
					</at-table-column>
					<at-table-column prop="city" label="所在城市">
					</at-table-column>
					<at-table-column prop="area" label="所在地区">
					</at-table-column>
					<at-table-column prop="alinkman" label="责任人">
					</at-table-column>
					<at-table-column prop="alinkman_email" label="邮箱" width='160'>
					</at-table-column>
					<at-table-column prop="atelephone" label="手机号码">
					</at-table-column>
				</at-table>
			</div>
			<div style='text-align:center;margin:20px'>
				<Pagination 
				:currentPage="history_add.tableData.pagination.current" 
				:total="history_add.total" 
				:pageSizes="pageSizes" 
				:pageSize="history_add.tableData.pagination.pageSize" 
				layout='total, sizes, prev,  pager, next, jumper'
				@current-change="handleCurrentChange" 
				@size-change="handleSizeChange">
				</Pagination>
		  </div>
		</div>
			</at-tab-pane>
			<at-tab-pane label="修改历史信息" name="update">
				<div class='contain_box'>
					<div class='table_title'>修改同步历史</div>
					<div class='title_box'>
						<at-search class='search_input' project='mh' :placeholder='searchTitle' type='text' v-model='value' icon='search' :on-icon-click='handleIconClick'></at-search>
					</div>
					<div class="tableBox">
				  <at-table 
					:data="history_edit.table" 
					@sort-change="sortChange" @filter-change="filterHandler">
					<at-table-column prop="zr_time" label="更新时间" width='160' column-key="delete" sortable="custom">
					</at-table-column>
					<at-table-column prop="aagency_id" label="机构ID">
					</at-table-column>
					<at-table-column prop="aagency_name" label="机构名称">
					</at-table-column>
					<at-table-column prop="ctype_name" label="类型" column-key="type_name">
					</at-table-column>
					<at-table-column prop="bagency_name" label="上级机构">
					</at-table-column>
					<at-table-column prop="sup" label="监管机构">
					</at-table-column>
					<at-table-column prop="province" label="所在省份">
					</at-table-column>
					<at-table-column prop="city" label="所在城市">
					</at-table-column>
					<at-table-column prop="area" label="所在地区">
					</at-table-column>
					<at-table-column prop="alinkman" label="责任人">
					</at-table-column>
					<at-table-column prop="alinkman_email" label="邮箱" width='160'>
					</at-table-column>
					<at-table-column prop="atelephone" label="手机号码">
					</at-table-column>
				</at-table>
			</div>
			<div style='text-align:center;margin:20px'>
				<Pagination 
				:currentPage="history_edit.tableData.pagination.current" 
				:total="history_edit.total" 
				:pageSizes="pageSizes" 
				:pageSize="history_edit.tableData.pagination.pageSize" 
				layout='total, sizes, prev,  pager, next, jumper'
				@current-change="handleCurrentChange" 
				@size-change="handleSizeChange">
				</Pagination>
		  </div>
		</div>
			</at-tab-pane>
			<at-tab-pane label="删除历史信息" name="delete">
				<div class='contain_box'>
					<div class='table_title'>删除同步历史</div>
					<div class='title_box'>
						<at-search class='search_input' project='mh' :placeholder='searchTitle' type='text' v-model='value' icon='search' :on-icon-click='handleIconClick'></at-search>
					</div>
					<div class="tableBox">
				  <at-table :data="history_del.table" @sort-change="sortChange" @filter-change="filterHandler">
					<at-table-column prop="zr_time" label="更新时间" width='160' column-key="delete" sortable="custom">
					</at-table-column>
					<at-table-column prop="aagency_id" label="机构ID">
					</at-table-column>
					<at-table-column prop="aagency_name" label="机构名称">
					</at-table-column>
					<at-table-column prop="ctype_name" label="类型">
					</at-table-column>
					<at-table-column prop="bagency_name" label="上级机构">
					</at-table-column>
					<at-table-column prop="sup" label="监管机构">
					</at-table-column>
					<at-table-column prop="province" label="所在省份">
					</at-table-column>
					<at-table-column prop="city" label="所在城市">
					</at-table-column>
					<at-table-column prop="area" label="所在地区">
					</at-table-column>
					<at-table-column prop="alinkman" label="责任人">
					</at-table-column>
					<at-table-column prop="alinkman_email" label="邮箱" width='160'>
					</at-table-column>
					<at-table-column prop="atelephone" label="手机号码">
					</at-table-column>
				</at-table>
			</div>
			<div style='text-align:center;margin:20px'>
				<Pagination 
				:currentPage="history_del.tableData.pagination.current" 
				:total="history_del.total" 
				:pageSizes="pageSizes" 
				:pageSize="history_del.tableData.pagination.pageSize" 
				layout='total, sizes, prev,  pager, next, jumper'
				@current-change="handleCurrentChange" 
				@size-change="handleSizeChange">
				</Pagination>
		  </div>
		</div>
			</at-tab-pane>
		</at-tabs>
		
		</div>
</template>
<script>
import { mapState } from 'vuex'
import { debounce } from '../../../../components/business/common.js'
export default {
  name: 'mechanismssyncLog',
  data () {
    return {
      input: '',
      value: '',
      total: '',
      searchTitle: '请输入机构名称',
      activeName: 'add',
      currentPage: 1,
      totalpage: 0,
      pageSizes: [20, 40, 60, 80],
      pageSize: 20
    }
  },
  computed: {
    ...mapState({
      // tradename: state => state.mechanism.options,
      history_add: state => state.mechanism.history_add,
      history_edit: state => state.mechanism.history_edit,
      history_del: state => state.mechanism.history_del
    })
  },

  created () {
    this.$store.dispatch('/mechanism/gethisadd', { type: 'add' })
    this.$store.dispatch('/mechanism/gethisupdate', { type: 'update' })
		this.$store.dispatch('/mechanism/gethisdelete', { type: 'delete' })
		// this.$store.dispatch('/mechanism/getNodetype')
  },
  methods: {
    handleClick: debounce(
      function (tab, type) {
        this.activeName = tab.name
        this.history_add.tableData.pagination.current = 1
        this.history_edit.tableData.pagination.current = 1
        this.history_del.tableData.pagination.current = 1
        this.history_add.tableData.pagination.pageSize = 20
        this.history_edit.tableData.pagination.pageSize = 20
        this.history_del.tableData.pagination.pageSize = 20
        this.history_add.tableData.search.value = ''
        this.history_edit.tableData.search.value = ''
        this.history_del.tableData.search.value = ''
        this.value = ''
        if (this.activeName === 'add') {
          this.$store.dispatch('/mechanism/gethisadd', { type: 'add' })
        } else if (this.activeName === 'update') {
          this.$store.dispatch('/mechanism/gethisupdate', { type: 'update' })
        } else if (this.activeName === 'delete') {
          this.$store.dispatch('/mechanism/gethisdelete', { type: 'delete' })
        }
      }, 500, true
    ),
    handleCurrentChange (page) {
      if (this.activeName === 'add') {
        this.$store.dispatch('/mechanism/gethisadd', {
          type: 'pagCur',
          page: page
        })
      } else if (this.activeName === 'update') {
        this.$store.dispatch('/mechanism/gethisupdate', {
          type: 'pagCur',
          page: page
        })
      } else if (this.activeName === 'delete') {
        this.$store.dispatch('/mechanism/gethisdelete', {
          type: 'pagCur',
          page: page
        })
      }
    },
    //  改变每一页条数
    handleSizeChange (pageSizes) {
      if (this.activeName === 'add') {
        this.$store.dispatch('/mechanism/gethisadd', {
          type: 'pagSize',
          pageSizes: pageSizes
        })
      } else if (this.activeName === 'update') {
        this.$store.dispatch('/mechanism/gethisupdate', {
          type: 'pagSize',
          pageSizes: pageSizes
        })
      } else if (this.activeName === 'delete') {
        this.$store.dispatch('/mechanism/gethisdelete', {
          type: 'pagSize',
          pageSizes: pageSizes
        })
      }
    },
    //  搜索
    handleIconClick () {
      if (this.activeName === 'add') {
        this.$store.dispatch('/mechanism/gethisadd', {
          type: 'search',
          value: this.value,
          currentPage: this.currentPage
        })
      } else if (this.activeName === 'update') {
        this.$store.dispatch('/mechanism/gethisupdate', {
          type: 'search',
          value: this.value,
          currentPage: this.currentPage
        })
      } else if (this.activeName === 'delete') {
        this.$store.dispatch('/mechanism/gethisdelete', {
          type: 'search',
          value: this.value,
          currentPage: this.currentPage
        })
      }
    },
    // 排序
    sortChange ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'zr_time'
        order = 'ascending'
      }
      if (this.activeName === 'add') {
        this.$store.dispatch('/mechanism/gethisadd', {
          type: 'sorter',
          key: prop,
          value: order.slice(0, -3)
        })
      } else if (this.activeName === 'update') {
        this.$store.dispatch('/mechanism/gethisupdate', {
          type: 'sorter',
          key: prop,
          value: order.slice(0, -3)
        })
      } else if (this.activeName === 'delete') {
        this.$store.dispatch('/mechanism/gethisdelete', {
          type: 'sorter',
          key: prop,
          value: order.slice(0, -3)
        })
      }
    },
    // 过滤
    filterHandler (filters) {
      if (this.activeName === 'add') {
        this.$store.dispatch('/mechanism/gethisadd', {
          type: 'filter',
          filters: filters
        })
      } else if (this.activeName === 'update') {
        this.$store.dispatch('/mechanism/gethisupdate', {
          type: 'filter',
          filters: filters
        })
      } else if (this.activeName === 'delete') {
        this.$store.dispatch('/mechanism/gethisdelete', {
          type: 'filter',
          filters: filters
        })
      }
    }
  }
}
</script>
<style lang='less'>
#historymechanism {
	.tableBox {
		border: none;
	}
  .search_input {
    margin-top: 10px;
    float: right;
    margin-right: 20px;
  }
  .title_box {
    height: 40px;
  }
  .contain_box {
    border: 1px solid #eeeeee;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
  }
  .table_title {
    color: #5c6781;
    font-size: 14px;
    height: 50px;
    border-bottom: 1px solid #eeeeee;
    padding-left: 20px;
    line-height: 50px;
    font-weight: bold;
  }
  .at-tabs--border-card > .at-tabs__header .at-tabs__item:last-child {
    margin-right: 5px;
  }
  .at-tabs__nav-scroll {
    background: #ecf0f5;
  }
  .at-tabs--border-card > .at-tabs__header .at-tabs__item.is-active {
    color: #5c6781;
    border: none;
    border-bottom: none;
    background-color: #fff;
  }
  .table_box {
    margin-left: 20px;
    margin-right: 20px;
  }
  .at-tabs--border-card > .at-tabs__header .at-tabs__item {
    transition: none;
  }
}
</style>
